<template>
  <div id="personagemain">

    <!-- <div class="hr"></div>  -->

    <div class="el-center-area border">
      <div class="el-center-img">
          <!-- <img src="../../assets/touxiang.jpg" width="50" height="50"> -->
           <!-- <img  :src= "this.uuhead" width="50" height="50">  -->
           <!-- {{uuhead}} -->
 <el-upload
  class="avatar-uploader"
  action="http://localhost:8001/imgUpload/"
  :show-file-list="false"
  :on-success="handleAvatarSuccess"
  :before-upload="beforeAvatarUpload">
  <img v-if="imageUrl" :src="imageUrl" class="avatar">
  <i v-else class="el-icon-plus avatar-uploader-icon">
       <img :src= "uuhead" width="150" height="150"/>
<!-- <el-image
      style="width: 100px; height: 100px"
      :src= "uuhead"
      ></el-image>        -->
  </i>

</el-upload>
        <div class="el-center-name">{{user.uname}}</div>
        <div class="el-center-welcome">欢迎来到天津市人民医院</div>
        <div class="el-center-daohang">
          <el-menu
            default-active="3"
            class="el-menu-vertical-demo"
            @open="handleOpen"
            @close="handleClose"
          >
            <el-menu-item index="5">
              <i class="el-icon-chat-dot-round"></i>
            
              <span slot="title">
                  <router-link to="/personage/myzixun" @click="zujianshow=true ,yuyumess=false">
                我的咨询 </router-link>
                </span>
             
            </el-menu-item>
            <el-menu-item index="2">
              <i class="el-icon-circle-check"></i>
              <span slot="title">
                <router-link to="/personage/mydoctor" @click="zujianshow=true ,yuyumess=false">
                我的医生
                </router-link>
                </span>
            </el-menu-item>
            <el-submenu index="1">
              <template slot="title">
                <i class="el-icon-circle-check"></i>
                <span>预约挂号</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="1-1" @click="zujianshow=true ,yuyumess=false">
                  <router-link to="/personage/phoneservice">
                  电话咨询
                  </router-link>
                  </el-menu-item>
                <el-menu-item index="1-2" @click="zujianshow=true ,yuyumess=false">
                  <router-link to="/personage/peizhenservice" >
                  陪诊服务
                  </router-link>
                  </el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <el-menu-item index="6">
              <i class="el-icon-star-off"></i>
                 
              <span slot="title" @click="zujianshow=true ,yuyumess=false">
                 <router-link to="/personage/pinglun">
                
                就医经验
                </router-link>
                
                </span>
              
                  
            </el-menu-item>
            <el-menu-item index="7">
              <i class="el-icon-setting"></i>
              <span slot="title" @click="zujianshow=true ,yuyumess=false">
                <router-link to="/personage/xitongbanben">
               我的评论
                </router-link>
                </span>
            </el-menu-item>
          </el-menu>
        </div>
      </div>
      <div v-show="yuyumess">

      
      <div class="el-center-dingdan-zi" >我的订单</div>
      <div class="el-center-border"></div>
      <div class="el-center-dingdan-area" >
        <el-table
          ref="singleTable"
          :data="yuyues"
          highlight-current-row
          @current-change="handleCurrentChange"
          style="width: 100%"
        >
          <el-table-column type="index" width="50"></el-table-column>
          <el-table-column property="odates" label="预约日期" width="110"></el-table-column>
          <el-table-column property="otimes" label="预约时间" width="110"></el-table-column>
          <el-table-column property="dname" label="医生姓名" width="110"></el-table-column>
          <el-table-column property="kname" label="科室" width="80"></el-table-column>
          <el-table-column property="uname" label="就诊人" width="80"></el-table-column>
          <el-table-column property="oid" label="操作" width="150">
          <!-- <el-button type="text" @click="deleteUserYuYUe()">取消预约</el-button> -->
            <template slot-scope="scope">
 
       <!-- <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button> -->
 
       <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">取消预约</el-button>
 
    </template>
            
            <!-- <el-button type="text" @click="dialogFormVisible = true">修改预约</el-button> -->
          </el-table-column>
        </el-table>
       <el-dialog title="提示" :visible.sync="delVisible" width="300px" center>
 
   <div class="del-dialog-cnt">删除不可恢复，是否确定删除？</div>
 
   <span slot="footer" class="dialog-footer">
 
      <el-button @click="delVisible = false">取 消</el-button>
 
      <el-button type="primary" @click="deleteUserYuYUe" >确 定</el-button>
 
  </span>
 
</el-dialog>
      </div>
      </div>
       <div class="zujian-area border" v-show="zujianshow">
      <router-view/>
    </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      zujianshow:false,
      yuyumess:true,
                  packData:[],
 
            delVisible:false,//删除提示弹框的状态
 
            msg:"",//记录每一条的信息，便于取id
 
            delarr:[],//存放删除的数据
            oid:'',
            multipleSelection:[],//多选的数据
 
        yuyues:'',
        uuhead:"data:image/jpeg;base64,",
        user: {
        uname: window.localStorage.getItem("uname"),
        uidcard: window.localStorage.getItem("uidcard")
      },
 users: {},
      dialogFormVisible: false,
      imageUrl: '',
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: ""
      },
   
      formLabelWidth: '120px',
      tableData: [
       {  
          odates:"",
          otimes: "",
          dname: "",
          kname: "",
          uname: "",
          oid: ""
        }
      ],
      currentRow: null,
   
    };
  },
   mounted: function() {
  
    this.getUser();
    this.getUserYuYUe();
  },
    // handleDelete(index, row) {
    //             this.ids = [row.id];
    //             this.delVisible = true;
    //         },
  methods: {

handleDelete(index, row) {
 
       this.idx = index;
 
       this.msg=row;//每一条数据的记录
 
       this.delarr.push(this.msg.oid);//把单行删除的每条数据的id添加进放删除数据的数组
 
      this.delVisible = true;
 
},
 delAll() {
 
    this.delVisible = true;//显示删除弹框
 
    const length = this.multipleSelection.length;
 
    for (let i = 0; i < length; i++) {
 
     this.delarr.push(this.multipleSelection[i].oid)
 
    }
 
},
 handleSelectionChange(val) {
 
    this.multipleSelection = val;
 
},
 





// http://localhost:8001/user/getuser
   getUser: function() {
    ;
      this.$http
        .post("http://localhost:8001/user/getuser", this.user)
        .then(function(data) {
          this.users = data.body;
         
      
          
          // if( this.users.uhead==null){
           
          //   this.uuhead = require("../../assets/touxiang.jpg");
          //    console.log("测试默认");
          // }
          // else{
            this.getImage();
        
            // console.log("测试数据库");
        //  }
        });
    },
   
     getImage: function() {
      this.$http
        .post("http://localhost:8001/getImage",this.user)
        .then(function(data) {
          const abc=+data.body.image;
           this.uuhead = "data:image/jpeg;base64,"+data.body.image;
          // console.log(this.uuhead);
          // alert(abc);
        });
    },
updateImg: function() {  
      this.$http
        .post("http://localhost:8001/updateimg", this.user)
        .then(function(data) {
          //  console.log("测试" +data.bodyText);
          if(data.bodyText=="success"){
               alert("修改成功");
              //  console.log("测试" +data.bodyText);
          }
        
        });
    },
getUserYuYUe: function() {  
      this.$http
        .post("http://localhost:8001/yuyue/findyuyue", this.user)
        .then(function(data) {
          this.yuyues = data.body;
          console.log(data.bodyText)       
        });
    },
deleteUserYuYUe: function() {  
      
      this.$http
        .get("http://localhost:8001/yuyue/deleteyuyue", { params:{ oid:this.msg.oid}})
        .then(function(data) {
          if(data.bodyText=="success") {
        
               this.$message({
          showClose: true,
          message: '删除成功，请刷新页面',
          type: 'success'
        });
         }else{
        
              this.$message({
          showClose: true,
          message: '删除失败',
          type: 'error'
        });
         }
          this.delVisible = false;        
        });
    },

    open() {
      this.$confirm("此操作将取消预约, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "取消成功!"
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },

    setCurrent(row) {
      this.$refs.singleTable.setCurrentRow(row);
    },
    handleCurrentChange(val) {
      this.currentRow = val;
    },
     handleAvatarSuccess(res, file) {
        this.imageUrl = URL.createObjectURL(file.raw);
        this.updateImg()
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      },
    

    }
  
};

</script>
<style scoped>
.zujian-area{
  width: 600px;
  height: 600px;
  position: absolute;
  background-color: #FAFAFA;
  top:60px;
  left: 230px;
}
.from-area{
    width: 500px;
}
.el-center-area {
  width: 900px;
  height: 700px;
  margin-left: 300px;
  margin-top: 20px;
  position: relative;
  background-color: #E0F2F1;
}
.el-center-img {
  position: absolute;
  top: 50px;
  left: 15px;
}
.el-center-name {
  position: absolute;
  top: 90px;
  left: 60px;
  color: #bdbdbd;
  font-size: 18px;
}
.el-center-welcome {
  position: absolute;
  top: 110px;
  left: 15px;
  color: #bdbdbd;
  font-size: 12px;
}
.el-center-daohang {
  background-color: #bdbdbd;
  line-height: 10px;
}
.el-center-dingdan-area {
  position: absolute;
  width: 700px;
  height: 500ox;
  left: 200px;
  top: 150px;
  line-height: 10px;
}
.el-center-dingdan-zi {
  font-size: 20px;
  color: #0277bd;
  position: absolute;
  top: 10px;
  left: 255px;
}
.el-center-border {
  border: 1px solid rgb(71, 71, 70);
  position: relative;
  top: 130px;
  width: 55%;
  left: 200px;
}
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    /* font-size: 28px;  */
    color: #8c939d;
    /* width: 158px;
    height: 158px; */
    line-height: 198px;
    text-align: center;
    
    

  }
  .avatar {
    width: 158px;
    height: 158px;
    display: block;
  }
.hr {
  border-bottom: 10px solid red;
  margin-top: -10px;
}
.border {
  /* border: 1px solid red; */
}
a{
   text-decoration: none;
}
</style>


